<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <div id="root">
    <h2 :style="{opacity}">欢迎学习Vue</h2>
    <button @click="opacity=1">透明度设置为1</button>
    <button @click="stop">停止变换</button>
  </div>
</body>

<script>
  Vue.config.productionTip = false
  const vm = new Vue({
    el: '#root',
    data: {
      opacity: 1,
      
    },
    methods: {
      stop() {
        // clearInterval(this.timer)
        this.$destroy()
      }
    },
    // Vue完成模板的解析，并把真实的DOM元素放入页面后（挂载完毕）调用mounted
    mounted() {
      // console.log('mounted')
      this.timer = setInterval(() => {
        this.opacity -= 0.01
        if (this.opacity <= 0)
          this.opacity = 1
      }, 16)
    },
    beforeDestroy() {
        clearInterval(this.timer)
    },
  })

</script>

</html>